<!-- 国内地区城市数据表 -->
<script lang='ts' setup>
import cityNames from '@/hooks/cityNames';
import { useRouter } from 'vue-router'
const router = useRouter()
function goRouter(name: string) {
    console.log("789798", name)
    router.push({
        name: name
    })
}
</script>
<template>
    <div>
        <div class="cityname_item" v-for="item in cityNames.provice">
            <div class="cityItem_left">
                {{ item.name }}
            </div>
            <div class="cityItem_right">
                <ul>
                    <li style="cursor: pointer;" v-for="list in item.city" @click="goRouter('beijing')">
                        {{ list.name }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<style lang='scss' scoped>
$cityNameWidth: 100px;
$cityNameHeight: 50px;

.cityname_item {
    display: flex;
    margin-bottom: 10px;

    .cityItem_left {
        width: 100px;
        padding-top: 15px;
        text-align: center;
    }

    .cityItem_right {
        width: 100%;
        height: 100%;

        ul {
            display: flex;
            flex-wrap: wrap;

            li {

                width: $cityNameWidth;
                height: $cityNameHeight;
                line-height: $cityNameHeight;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>
